解釋導覽頁的程式碼跟關於

2024 iThome 鐵人賽

DAY 4

自我挑戰組

asp.net可以變出那些功能系列第 4 篇

16th鐵人賽

Tzu

2024-09-11 01:06:35

654 瀏覽

分享至

解釋導覽頁的程式碼跟關於網頁的內容

解釋導覽頁的程式碼
這段程式碼是使用 ASP.NET MVC 框架構建的前端網頁模板。主要包含 HTML、C# Razor 語法，以及引入了 Bootstrap 5 框架來美化頁面。下面逐步解釋這個程式碼：

1. 文件類型宣告及語言設定

<!DOCTYPE html>
<html lang="zh-Hant-TW">

這段標記宣告了文件的類型為 HTML 並指定網頁語言為繁體中文（台灣）。

2. `<head>` 區塊

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@ViewBag.Title - 來好</title>

meta charset="utf-8" 設定了字符編碼為 UTF-8，支援多語言顯示。
meta name="viewport" 是為了讓網頁在行動裝置上自動調整大小。
<title> 使用 @ViewBag.Title 來動態生成標題，並附加固定標題「來好」。

3. 引入 Bootstrap 5

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet">

這行程式碼通過 CDN 加載 Bootstrap 5 的 CSS，為頁面提供響應式布局和預定義樣式。

4. 樣式區塊

<style>
    body {
        display: flex;
        min-height: 100vh;
        flex-direction: column;
    }

    .content {
        flex: 1;
        padding: 20px;
        min-height: 100vh;
    }

    .navbar-nav .nav-link {
        color: rgba(255,255,255,.55);
    }

    .navbar-nav .nav-link:hover {
        color: rgba(255,255,255,.75);
    }

    .dropdown-menu {
        background-color: #343a40;
    }

    .dropdown-item {
        color: rgba(255,255,255,.55);
    }

    .dropdown-item:hover {
        background-color: #495057;
        color: #fff;
    }
</style>

body 設定使用 Flexbox，頁面內容會依據視窗大小自動調整，保證頁面佔滿整個視窗。
.content 設定頁面主要內容的最小高度和內邊距，確保內容充滿視窗並具有良好的排版效果。
navbar、dropdown-menu 和 dropdown-item 的樣式自定義了顏色，這部分用來調整導覽列中的鏈接、下拉菜單的配色和效果。

5. `<nav>` 導覽列

<nav class="navbar navbar-expand-md navbar-dark bg-dark">

使用 navbar-expand-md 設定導覽列在中等及以上螢幕寬度下顯示完整導航，並在更小的螢幕上折疊。
navbar-dark bg-dark 為導覽列設定深色背景及深色字體樣式。

<a class="navbar-brand" href="@Url.Action("About", "Home")">關於</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">

使用 @Url.Action("About", "Home") 動態生成「關於」頁面的 URL，指向 Home 控制器的 About 動作方法。
導覽列中還包括了多個下拉菜單，如「工業風網站」、「社群媒體」等，這些項目中使用 Razor 語法生成鏈接和頁面 URL。

6. 頁面主內容區

<div class="content">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - 來好</p>
    </footer>
</div>

@RenderBody() 用於在頁面中顯示子視圖的內容，這是 Razor 引擎動態注入的佔位符。
頁尾 (<footer>) 顯示當前年份和固定的「來好」文字，年份通過 @DateTime.Now.Year 動態生成。

7. 引入 Bootstrap 5 JS

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>

這段程式碼引入了 Bootstrap 5 的 JavaScript 功能，支援如下拉選單等互動效果。

8. 自定義腳本區

@RenderSection("scripts", required: false)

@RenderSection("scripts") 是一個佔位符，允許子視圖在需要時插入自己的 JavaScript 代碼。required: false 表示這個區塊是可選的。

關於網頁的內容
https://laihao2.com/Home/About

解釋程式碼

@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@{
    ViewBag.Title = "About";
}
@*<h2>@ViewBag.Title.</h2>*@
@*<h3>@ViewBag.Message</h3>*@

@*<p>Use this area to provide additional information.</p>*@

<h2></h2>
<h3></h3>
@*<img src="~/templates/myphoto.jpg" alt="My Photo" />*@
@*<img src="~/templates/webphoto.jpg" alt="My Photo" style="width:200px; height:auto;" />*@
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">

    <title>關於來好</title>

    <style>
        img {
            border-radius: 50%;
        }

        body {
            background-color: pink;
        }

        dl {
            margin-left: 20px;
        }

        dd {
            margin-left: 20px;
        }
        p::before {
            content: "♥";
        }
        /*虛擬元素*/
    </style>
</head>
<body>
    <h1>親愛的訪客</h1>
    <h2>很高興認識你</h2>
    @*<h2>自我介紹</h2>*@
    <img src="~/templates/webphoto.jpg" alt="My Photo" style="width: 200px; height: auto; float: left; " />
    <h3>■ 興趣</h3>
    <p>
        擁有多年經驗的軟體開發,
        有著深厚的熱情和豐富的實踐經驗。

        對各國文化有著深厚的興趣，並且一直在努力學習語文。
        這不僅豐富了語言能力，
        也加深了對文化的理解。

        喜歡結合不同的文化和技術風格，
        創造出獨具特色的解決方案。

        期待與您合作，共同創造出色的作品！
    </p>
    <p>
        長年、開発経験を持つソフトウェア エンジニアであり、
        ソフトウェア開発に対する深い情熱と豊富な実務経験を持っています。

        日本文化に深い興味があり、日本語を一生懸命勉強してきました。
        これにより日本語力が豊かになっただけでなく、日本文化への理解も深まりました。
        仕事では、豊富な経験から磨いた高い技術と国際的な文化背景を活かして、
        ソリューションを作成することを楽しんでいます。

        素晴らしい作品を一緒に作っていけることを楽しみにしています！
    </p>
    <h3>
        相關證照
    </h3>
    <p>
        PL-900 Power Platform 商業智慧應用基礎認證/
        AI-900 AI 人工智慧基礎認證/
        GS1條碼管理師/
        EPCIE 物聯網工程師認證/
        Google Ads 搜尋廣告認證/
        Google Analytics (分析) 認證
    </p>
    <h3>
        聯繫方式
    </h3>
    @*<p>Email:jzs2home@hotmail.com</p>*@
    <dl style="margin-left: 20px;">
        <dt>Email:</dt>
        <dd style="margin-left: 20px;">
            <a href="mailto:jzs2home@hotmail.com">jzs2home@hotmail.com</a>
        </dd>

        <dt>(匿名)留言板:</dt>
        <dd style="margin-left: 20px;">
            <a href="http://jzs2home.byethost15.com/index.php?i=1" target="_blank">http://jzs2home.byethost15.com/index.php?i=1</a>
        </dd>
    </dl>
    <img src="~/templates/microsoftAI900.png" alt="microsoftAI900" style="width:200px; height:auto;" />

    <img src="~/templates/GOOGLEADSSEARCH.png" alt="GOOGLEADSSEARCH" style="width:200px; height:auto;" />

    <img src="~/templates/GOOGLEANALYTICS.png" alt="GOOGLEANALYTICS" style="width:200px; height:auto;" />
</body>
</html>

這段程式碼是 ASP.NET MVC 中的 Razor 檢視，展示了一個「關於」頁面的 HTML 與 C# 結合的結構。具體解釋如下：

1. Razor 語法

@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@{
    ViewBag.Title = "About";
}

Layout 設定了這個檢視使用的母版頁面，路徑是 ~/Views/Shared/_Layout.cshtml。這個母版頁面將包含共用的頁面結構，如導航列、頁腳等。
ViewBag.Title = "About"; 動態設置了頁面的標題為「About」，這個值會被母版頁面中的 @ViewBag.Title 語法讀取，用於顯示在 <title> 標籤或其他地方。

2. HTML 文檔結構

<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
    <title>關於來好</title>

<!DOCTYPE html> 定義了文件類型為 HTML5。
lang="zh-Hant-TW" 指定語言為繁體中文（台灣）。
<meta charset="UTF-8"> 設置字符編碼為 UTF-8，支援多語言內容。
link 標籤引入了外部的 CSS 文件 css/style.css，用於設計頁面樣式。
<title> 標籤設置了頁面的標題為「關於來好」。

3. 頁面樣式

<style>
    img {
        border-radius: 50%;
    }

    body {
        background-color: pink;
    }

    dl {
        margin-left: 20px;
    }

    dd {
        margin-left: 20px;
    }

    p::before {
        content: "♥";
    }
</style>

圖片 (img) 被設置為圓形 (border-radius: 50%)。
頁面背景顏色為粉紅色 (background-color: pink)。
dl 和 dd 定義列表的左側內邊距調整為 20px，讓內容排列更加美觀。
p::before 定義段落的虛擬元素，為每個段落前添加了一個「♥」符號。

4. 頁面內容

標題與圖片

<h1>親愛的訪客</h1>
<h2>很高興認識你</h2>
<img src="~/templates/webphoto.jpg" alt="My Photo" style="width: 200px; height: auto; float: left;" />

使用了 <h1> 和 <h2> 標籤分別表示頁面主標題和副標題。
插入了一張位於 ~/templates/webphoto.jpg 的圖片，寬度設為 200px，且圖片浮動至左側 (float: left;) 以便讓文本內容環繞圖片。

段落與描述

<h3>■ 興趣</h3>
<p>
    擁有多年經驗的軟體開發,
    有著深厚的熱情和豐富的實踐經驗。
    ...
</p>
<p>
    長年、開発経験を持つソフトウェア エンジニアであり、
    ...
</p>

段落描述了個人的興趣、技術背景和語言學習經驗，內容有中文和日文兩部分。每個段落前面會顯示「♥」符號，這是由前面定義的 CSS 虛擬元素樣式實現的。

證照與聯繫方式

<h3>相關證照</h3>
<p>
    PL-900 Power Platform 商業智慧應用基礎認證/
    AI-900 AI 人工智慧基礎認證/
    ...
</p>
<dl>
    <dt>Email:</dt>
    <dd><a href="mailto:jzs2home@hotmail.com">jzs2home@hotmail.com</a></dd>

    <dt>(匿名)留言板:</dt>
    <dd><a href="http://jzs2home.byethost15.com/index.php?i=1" target="_blank">留言板</a></dd>
</dl>

證照部分列出了多項專業認證，如 Power Platform 和 Google Ads 認證。
聯繫方式使用了定義列表 (<dl>, <dt>, <dd>) 來排列 email 和匿名留言板的地址，並使用 <a> 標籤創建超連結。

圖片展示

<img src="~/templates/microsoftAI900.png" alt="microsoftAI900" style="width:200px; height:auto;" />
<img src="~/templates/GOOGLEADSSEARCH.png" alt="GOOGLEADSSEARCH" style="width:200px; height:auto;" />
<img src="~/templates/GOOGLEANALYTICS.png" alt="GOOGLEANALYTICS" style="width:200px; height:auto;" />

這些 <img> 標籤展示了多個認證的徽章圖片，如 Microsoft AI-900、Google Ads 搜尋廣告和 Google Analytics 認證。

總結

這個「關於」頁面展示了個人的技術背景、興趣愛好、相關認證和聯繫方式，並通過 CSS 美化了網頁佈局。

但是~
ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View

就算沒有資料庫還是要有Controllers裡面的Entities之後才是產生畫面View

解釋Controllers裡面的程式碼

public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

這段程式碼是 ASP.NET MVC 控制器中的一個動作方法 (Action Method)，名稱為 About。具體解釋如下：

1. 方法定義

public ActionResult About()

public: 此方法是公開的，表示可以從外部訪問。
ActionResult: 返回值類型是 ActionResult，這是 ASP.NET MVC 中所有動作結果的基類，表示該動作會產生一個 HTTP 回應。常見的結果類型包括 ViewResult (渲染一個視圖頁面)、RedirectResult (重定向到另一個 URL) 等。
About(): 這是動作方法的名稱，在此處表示處理應用程式的「關於」頁面。

2. 設置 `ViewBag.Message`

ViewBag.Message = "Your application description page.";

ViewBag 是 ASP.NET MVC 中用來在控制器和視圖之間傳遞數據的一種動態屬性機制。它允許你在控制器中設置數據，然後在視圖中讀取這些數據。
ViewBag.Message 設置為一個字串 "Your application description page."，這是一個簡單的訊息，表示這個頁面用來描述應用程式。在對應的視圖 (About.cshtml) 中，可以通過 @ViewBag.Message 來顯示這個訊息。

3. 返回視圖

return View();

View() 是控制器動作返回的一個方法，這個方法會渲染與該動作名稱相對應的視圖頁面。在這裡，它將返回一個名為 About 的視圖。ASP.NET MVC 會根據慣例尋找位於 Views/Home/About.cshtml 的視圖文件，來渲染該頁面。

總結

當用戶訪問 /Home/About 路徑時，這個 About 動作會執行。它會設置 ViewBag.Message，然後返回與之對應的 About.cshtml 視圖。視圖將可以使用 ViewBag.Message 顯示相應的訊息內容。

大家明天見，再來就是工業風網站的首頁~

開始說從無到有的無了喔~

工業風網站的首頁

系列文

asp.net可以變出那些功能共 30 篇

RSS系列文訂閱系列文

1 人訂閱

完整目錄

熱門推薦

{{ item.channelVendor }} | {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

902 組

團體組數

37 組

累計文章數

19752 篇

完賽人數

529 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 17th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css react

IT邦幫忙

asp.net可以變出那些功能系列 第 4 篇